<template>
  <xh-pages>
    <view class="pages-container">
      <view class="block-container">
        <view class="item" @tap="hanldHeadimg">
          <view class="label">
            <image :src="userInfo.avatar" class="logo" mode="scaleToFill" />
          </view>
          <view class="value">
            <view class="text">修改头像</view>
          </view>
        </view>
      </view>
      <view class="block-container">
        <view class="item">
          <view class="label"> 个人昵称 </view>
          <view class="value">
            <view class="text">
              {{ userInfo.nickname ? userInfo.nickname : "未设置昵称" }}
            </view>
            <view class="icon pt-icon-youce"></view>
          </view>
        </view>
        <view class="item">
          <view class="label"> 登录账号 </view>
          <view class="value">
            <view class="text">{{ userInfo.username ? userInfo.username : "未绑定" }}</view>
            <view class="icon pt-icon-youce"></view>
          </view>
        </view>
        <view class="item">
          <view class="label"> 登录密码 </view>
          <view class="value">
            <view class="text">
              {{ userInfo.password ? userInfo.password : "未设置" }}
            </view>
            <view class="icon pt-icon-youce"></view>
          </view>
        </view>
      </view>
      <view class="action">
        <button class="w-button" @tap="useUserStore().loginOut()">退出登录</button>
      </view>
    </view>
  </xh-pages>
</template>
  
<script setup lang="ts">
import { upload } from "@/common/upload";
import { useUserStore } from "@/stores/user";
import { toast } from "@/utils/helpers";

const userInfo = storeToRefs(useUserStore()).userInfo

const saveHeadimg = (path: string) => {
  const queryParams = {
    field: "avatar",
    value: path,
  };
  uni.$u.http.post("Users/userSave", queryParams).then((res: any) => {
    uni.$emit('user::update')
    toast("头像修改成功");
  });
};
const hanldHeadimg = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempPath = res.tempFilePaths[0];
      upload(tempPath, 'headimg').then((url: string) => {
        saveHeadimg(url);
      });
    },
  });
};
</script>
  
<style scoped lang="scss">
.pages-container {
  .block-container {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 30rpx 0;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #888;
      font-size: 26rpx;
      padding: 30rpx;
      border-bottom: 1px solid #f1f1f1;

      .label {
        .logo {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }
      }

      .value {
        display: flex;
        align-items: center;

        .text {
          padding-right: 10rpx;
        }

        .icon {
          font-size: 28rpx;
        }
      }

      &:active {
        background: #f9f9f9;
      }
    }
  }

  .action {
    margin-top: 30rpx;
    padding: 0 30rpx;
  }
}
</style>
  